import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Button, Divider, Card, Table, Popconfirm, Switch } from 'antd';
import { PageHeader } from 'ant-design-pro';
import { createList } from '@/components/HocCRUD';
import { modelName } from './config';
import { isObjectValEqual } from '/common/utils/utils';
import BatchDeleteBtn from '@/componentsTpl/ButtonComp/BatchDeleteBtn';
import SaveBtn from '@/componentsTpl/ButtonComp/SaveBtn';
import DeleteBtn from '@/componentsTpl/ButtonComp/DeleteBtn';
import ButtonComp from '@/componentsTpl/ButtonComp';
import SwitchComp from '@/componentsTpl/SwitchComp';

const { Search, Group } = Input;

@connect(({ loading, acctPeriod: { searchData, list, page } }) => ({
  searchData, list, page, loading,
}))
@createList({
  modelName,
  fetchInMount: false
})
export default class AcctPeriod extends Component {
  constructor(props) {
    super(props);
    this.searchData = {
      fuzzyMatch: 'code,name,calendar',
      search: '',
      current: 1,
      size: 13,
    };

    this.state = {
      selectedRowKeys: [], // Check here to configure the default column
    };
  }

  componentDidMount() {
    this.fetchList();
  }

  componentWillReceiveProps(nextProps) {
    if (!isObjectValEqual(nextProps, this.props)) {
      this.setState({ selectedRowKeys: [] }); // 当属性值有变化时，清空当前页的已选数据
    }
  }

  onSelectChange(selectedRowKeys) {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  fetchList() {
    this.props.fetchList(this.searchData);
  }

  deleteRecord(record) {
    this.props.deleteRecord(record);
  }

  handleMultiDel() {
    const { selectedRowKeys } = this.state;
    this.props.multiDeleteRecord(selectedRowKeys);
  }

  handleSearch(value) {
    this.searchData.search = value;
    this.fetchList();
  }

  handleChangePnSize(page, pageSize) {
    this.searchData.current = page;
    this.searchData.size = pageSize;
    this.fetchList();
  }

  showDetail(record) {
    this.props.showDetail(record);
  }

  render() {
    const { list, pageInfo, searchData, dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    const breadcrumbList = [
      {
        title: '期间',
      },
      {
        title: '期间设置',
      },
    ];
    const hasSelected = selectedRowKeys.length > 0;
    const action = (
      <Group>
        <span>
          <Search enterButton
                  style={{ width: 200, marginRight: 8 }}
                  placeholder="输入搜索"
                  onSearch={this.handleSearch.bind(this)}
                  defaultValue={searchData.search}
          />
        </span>
        <ButtonComp actionType={'createPeriod'} type="primary" onClick={this.showDetail.bind(this)}>新增期间</ButtonComp>
        <BatchDeleteBtn
          onClick={this.handleMultiDel.bind(this)}
          disabled={!hasSelected}
        >批量删除</BatchDeleteBtn>
      </Group>
    );

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };

    //pagination: {
    //...pageInfo,
    //      onChange: this.handleChangePnSize.bind(this),
    //      onShowSizeChange: this.handleChangePnSize.bind(this),
    //}
    const tableProps = {
      dataSource: list,
      bordered: true,
      pagination: pageInfo,
      columns: [
        // {
        //   title: '序号',
        //   dataIndex: 'no',
        //   key: 'no',
        // },
        {
          title: '年度',
          dataIndex: 'calendar',
          key: 'calendar',
        },
        {
          title: '月度期间',
          dataIndex: 'code',
          key: 'code',
        },
        {
          title: '期间名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '开始日期',
          dataIndex: 'startDate',
          key: 'startDate',
        },
        {
          title: '结束日期',
          dataIndex: 'endDate',
          key: 'endDate',
        },
        {
          title: '总过账限制',
          dataIndex: 'ledgerStatus',
          key: 'ledgerStatus',
          render: (text, record) => {
            return (
              <SwitchComp actionType={'toggleLedger'}
                          checkedChildren="开"
                          unCheckedChildren="关"
                          onClick={(checked) => {
                            dispatch({
                              type: `${modelName}/toggleControl`,
                              payload: {
                                period: record.id,
                              },
                            });
                          }}
                          checked={text === 0}
              />
            );
          },
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <>
              {/*<a href="javascript:" onClick={this.showDetail.bind(this, record)}>编辑</a>*/}
              {/*<Divider type="vertical"/>*/}
              <Popconfirm title="确认删除吗？" onConfirm={this.deleteRecord.bind(this, record)} okText="确认" cancelText="取消">
                <DeleteBtn btnType={'a'}>删除</DeleteBtn>
              </Popconfirm>
            </>
          ),
        },
      ],
      rowSelection,
    };

    const loadingList = !!this.props.loading.effects[`${modelName}/fetchList`];
    return (
      <div className="main-wrapper">
        <PageHeader
          title="会计期间" breadcrumbList={breadcrumbList} action={action}/>
        <Card className='main-body' bodyStyle={{ padding: 16 }}>
          <Table
            loading={loadingList} {...tableProps}/>
        </Card>
        {
          this.props.children
        }
      </div>
    );
  }
}
